<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#min{
				position: absolute;
				left: 0;
				top: 0;
				width: 300px;
				height: 300px;
				border: solid 1px black;
			}
			#min img{
				width: 100%;
				height: 100%;
			}
			#slider{
				position: absolute;
				left: 0;
				top: 0;
				width: 100px;
				height: 100px;
				background: yellow;
				opacity: 0.5;
				display: none;
			}
			#max{
				position: absolute;
				left: 350px;
				top: 0;
				width: 300px;
				height: 300px;
				border: solid 1px black;
				overflow: hidden;
				display: none;
			}
			#max img{
				position: absolute;
				left: 0;
				top: 0;
				width: 900px;
				height: 900px;
			}
		</style>
	</head>
	<body>
		<!--小图-->
		<div id="min">
			<img src="img/phone.jpg"/>
			<div id="slider"></div>
		</div>
		<!--大图-->
		<div id="max">
			<img src="img/phone.jpg"/>
		</div>
	</body>
	<script type="text/javascript">
		var minDiv = document.getElementById("min");
		var maxDiv = document.getElementById("max");
		var slider = document.getElementById("slider");
		
		var minImg = document.querySelector('#min img');
		var maxImg = document.querySelector('#max img');
		
		//给minDiv添加onmousemove事件
		minDiv.onmousemove = function(ev){
			var e = ev || window.event;
			//slider 和 maxDiv显示出来
			slider.style.display = 'block';
			maxDiv.style.display = 'block';
			//让slider跟着鼠标移动
			var x = e.clientX - slider.offsetWidth / 2;
			var y = e.clientY - slider.offsetHeight / 2;
			if(x <= 0){
				x = 0;
			}else if(x >= minDiv.offsetWidth - slider.offsetWidth){
				x = minDiv.offsetWidth - slider.offsetWidth;
			}
			if(y <= 0){
				y = 0;
			}else if(y >= minDiv.offsetHeight - slider.offsetHeight){
				y = minDiv.offsetHeight - slider.offsetHeight;
			}
			slider.style.left = x + 'px';
			slider.style.top = y + 'px';
			
			//大小图片宽高比例
			var scaleX = maxImg.offsetWidth / minImg.offsetWidth;
			var scaleY = maxImg.offsetHeight / minImg.offsetHeight;
			
			maxImg.style.left = -x * scaleX + 'px';
			maxImg.style.top = -y * scaleY + 'px';
		}
		//鼠标离开时slider 和 maxDiv隐藏
		minDiv.onmouseleave = function(){
			slider.style.display = 'none';
			maxDiv.style.display = 'none';
		}
	</script>
</html>
